<!DOCTYPE html>

<html lang="en">

<head>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
    <link href="/static/styles.css" rel="stylesheet">
    <title>Birthdays</title>
</head>

<body>
    <div class="jumbotron">
        <h1>Birthdays</h1>
    </div>
    <div class="container">
        <div class="section">
            <div class="error_message">
                {{ message }}
            </div>
            <h2>Add a Birthday</h2>
            <form action="/" method="POST">
                <input name="name" type="text" placeholder="Name" autocomplete="off" autofocus>
                <input name="month" type="number" placeholder="Month" max="12" min="1" autocomplete="off" autofocus>
                <input name="day" type="number" placeholder="Day" max="31" min="1" autocomplete="off" autofocus>
                <input type="submit" value="Add Birthday">
            </form>
        </div>

        <div class="section">

            <h2>All Birthdays</h2>
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Birthday</th>
                    </tr>
                </thead>
                <tbody>
                    {% for birthday in birthdays %}
                    <tr>
                        <td>{{ birthday.name }}</td>
                        <td>{{ birthday.month}}/{{ birthday.day }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</body>

</html>